<div  id="booking_step1" class="active">
    <form method="POST" action="bookingPage.php">
    <table width="100%" cellspacing="0">
        <tr class="row">
            <td><h2 id="step1_guest_details" style="color:#000;">Guest Details</h2></td>
        </tr>
    </table>
    {foreach from=$book.rooms key=roomIndex item=room} 
        <table width="100%">
            <tr><td><h5 class="roomTitle"> Room {$roomIndex}: Adults: {$room.adults} Children: {$room.children}</h5></td></tr>
            <tr><td><label>First Name</label></td></tr>
            <tr>
                <td>
                    <input id="guest.firstName{$roomIndex}.continue" type="hidden" value="0" />
                    <input type="text" 
                           value="{if $room.firstname neq ""}{$room.firstname}{/if}" 
                           maxlength="100" 
                           name="guest.firstName{$roomIndex}" 
                           onBlur="checkNameValidity(this, 'errorFirstName{$roomIndex}', 'guest.firstName{$roomIndex}.continue');" />
                    <div id="errorFirstName{$roomIndex}" class="error"></div>
                </td>
            </tr>
            <tr><td><label>Last Name</label></td></tr>
            <tr>
                <td>
                    <input id="guest.lastName{$roomIndex}.continue" type="hidden" value="0" />
                    <input type="text" 
                           value="{if $room.lastname neq ""}{$room.lastname}{/if}" 
                           maxlength="100" 
                           name="guest.lastName{$roomIndex}" 
                           onBlur="checkNameValidity(this, 'errorLastName{$roomIndex}', 'guest.lastName{$roomIndex}.continue');" />
                    <div id="errorLastName{$roomIndex}" class="error"></div>
                </td>
            </tr>
            <input type="hidden" value="{$room.smokingPreference}" name="rooms{$roomIndex}.smokingPreference" />
        </table>
    {/foreach}
    <table width="100%">
        <tr class="row" ><td> <h2 style="color:#000;" >Contact Details</h2></td></tr>
        <tr><td><p>We require a valid email address to contact you with the details of your booking.</p></td></tr>
        <tr><td><label>Email Address</label></td></tr>
        <tr>
            <td>
                <input id="contactDetails.emaiAddress.continue" type="hidden" value="0" />
                <input id='email1' type="text" value="{if $book.email neq ""}{$book.email}{/if}" 
                       maxlength="100" 
                       name="contactDetails.email" 
                       onBlur="checkEmailValidity(this, 'emailError', 'contactDetails.emaiAddress.continue');"/>
                <div  id="emailError" class="error"></div>
            </td>
        </tr>
        <tr><td><label>Confirm Email Address</label></td></tr>
        <tr>
            <td>
                <input id="contactDetails.confirmEmailAddress.continue" type="hidden" value="0" />
                <input type="text" id="email2" value="{if $book.confirmEmail neq ""}{$book.confirmEmail}{/if}" 
                       maxlength="100" 
                       name="contactDetails.confirmEmail" 
                       onBlur="emailMatch('email1', 'email2', 'confirmEmailError', 'contactDetails.confirmEmailAddress.continue');" />
                <div class="error" id="confirmEmailError"></div>
            </td>
        </tr>
        <tr><td><p> Needed if there are questions about your reservation.</p></td></tr>
        <tr><td><label>Phone Number:</label></td></tr>
        <tr>
            <td>
                <input id="contactDetails.phoneNumber.continue" type="hidden" value="0" />
                <input type="text" value="{if $book.phone neq ""}{$book.phone}{/if}" 
                       maxlength="16" 
                       name="contactDetails.phoneNumber" 
                       onBlur="checkPhoneValidity(this, 'phoneError', 'contactDetails.phoneNumber.continue');" />
                <div class="error" id="phoneError">
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                <input id="go_to_step2" type="hidden" value="stop" />
                <input id="booking_page_step" name="step" type="hidden" value="0" />
                <button value="Continue" onClick="chechFileldsValidityStep1();"  name="nextStep" type="submit">Continue</button>
            </td>
        </tr>
    </table>
    </form>
</div>